<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>登录界面</title>
    <!--    <link href="css/default.css" rel="stylesheet" type="text/css"/>-->
    <link href="{{ url_for('static', filename='user/css/default.css') }}" rel="stylesheet" type="text/css"/>
    <!--必要样式-->
    <!--    <link href="css/styles.css" rel="stylesheet" type="text/css"/>-->
    <link href="{{ url_for('static', filename='user/css/styles.css') }}" rel="stylesheet" type="text/css"/>
    <!--    <link href="css/demo.css" rel="stylesheet" type="text/css"/>-->
    <link href="{{ url_for('static', filename='user/css/demo.css') }}" rel="stylesheet" type="text/css"/>
    <!--    <link href="css/loaders.css" rel="stylesheet" type="text/css"/>-->
    <link href="{{ url_for('static', filename='user/css/loaders.css') }}" rel="stylesheet" type="text/css"/>
</head>

<body>
<div class='login'>
    <div class='login_title'>
        <span>用户登录</span>
    </div>

    <form method="post">
        <div class='login_fields'>
            <div class='login_fields__user'>
                <div class='icon'>
                    <!--                <img alt="" src='img/user_icon_copy.png'>-->
                    <img alt="" src="{{ url_for('static', filename='user/img/user_icon_copy.png') }}">
                </div>
                <input name="phone" placeholder='手机号' maxlength="16" type='text' autocomplete="off"/>
                <div class='validation'>
                    <!--                <img alt="" src='img/tick.png'>-->
                    <img alt="" src="{{ url_for('static', filename='user/img/tick.png') }}">
                </div>
            </div>
            <div class='login_fields__password'>
                <div class='icon'>
                    <!--                <img alt="" src='img/lock_icon_copy.png'>-->
                    <img alt="" src="{{ url_for('static', filename='user/img/lock_icon_copy.png') }}">
                </div>
                <input type="password"  name="password" placeholder='密码' maxlength="16" type='text' autocomplete="off">
                <div class='validation'>
                    <!--                <img alt="" src='img/tick.png'>-->
                    <img alt="" src="{{ url_for('static', filename='user/img/tick.png') }}">
                </div>
            </div>

            <div class='login_fields__password'>
                <div class='icon'>
                    <!--                <img alt="" src='img/key.png'>-->
                    <img alt="" src="{{ url_for('static', filename='user/img/key.png') }}">
                </div>
<!--                <input name="code" placeholder='验证码' maxlength="4" type='text' name="ValidateNum" autocomplete="off">-->
                <div class='validation' style="opacity: 1; right: -5px;top: -3px;">
                    <canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
                </div>
            </div>
            <div class='login_fields__submit'>
                <input type='submit' value='登录'>
            </div>
            <span style="color: red">{{ error }}</span>
        </div>
    </form>

    <div class='success'>
    </div>
    <div class='disclaimer'>
        <p><a href="{{url_for('user.register')}}">没有账号?注册</a></p>
    </div>
</div>
<div class='authent'>
    <div class="loader" style="height: 44px;width: 44px;margin-left: 28px;">
        <div class="loader-inner ball-clip-rotate-multiple">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <p>认证中...</p>
</div>
<div class="OverWindows"></div>

<!--&lt;!&ndash;<link href="layui/css/layui.css" rel="stylesheet" type="text/css"/>&ndash;&gt;-->
<!--<link href="{{ url_for('static', filename='user/layui/css/layui.css') }}" rel="stylesheet" type="text/css"/>-->

<!--&lt;!&ndash;<script type="text/javascript" src="js/jquery.min.js"></script>&ndash;&gt;-->
<!--<script type="text/javascript" src="{{ url_for('static', filename='user/js/jquery.min.js') }}"></script>-->
<!--&lt;!&ndash;<script type="text/javascript" src="js/jquery-ui.min.js"></script>&ndash;&gt;-->
<!--<script type="text/javascript" src="{{ url_for('static', filename='user/js/jquery-ui.min.js') }}"></script>-->
<!--&lt;!&ndash;<script type="text/javascript" src='js/stopExecutionOnTimeout.js?t=1'></script>&ndash;&gt;-->
<!--<script type="text/javascript" src="{{ url_for('static', filename='user/js/stopExecutionOnTimeout.js?t=1') }}"></script>-->
<!--&lt;!&ndash;<script type="text/javascript" src="layui/layui.js"></script>&ndash;&gt;-->
<!--<script type="text/javascript" src="{{ url_for('static', filename='user/layui/layui.js') }}"></script>-->

<!--&lt;!&ndash;<script type="text/javascript" src="js/Particleground.js"></script>&ndash;&gt;-->
<!--<script type="text/javascript" src="{{ url_for('static', filename='user/js/Particleground.js') }}"></script>-->

<!--&lt;!&ndash;<script type="text/javascript" src="Js/Treatment.js"></script>&ndash;&gt;-->
<!--<script type="text/javascript" src="{{ url_for('static', filename='user/Js/Treatment.js') }}"></script>-->

<!--&lt;!&ndash;<script type="text/javascript" src="js/jquery.mockjax.js"></script>&ndash;&gt;-->
<!--<script type="text/javascript" src="{{ url_for('static', filename='user/js/jquery.mockjax.js') }}"></script>-->
<!---->
<!--<script type="text/javascript">-->
<!--    var canGetCookie = 0; //是否支持存储Cookie 0 不支持 1 支持-->
<!--    var ajaxmockjax = 1; //是否启用虚拟Ajax的请求响 0 不启用  1 启用-->
<!--    //默认账号密码-->

<!--    var truelogin = "kbcxy";-->
<!--    var truepwd = "1";-->

<!--    var CodeVal = 0;-->
<!--    Code();-->

<!--    function Code() {-->
<!--        if (canGetCookie == 1) {-->
<!--            createCode("AdminCode");-->
<!--            var AdminCode = getCookieValue("AdminCode");-->
<!--            showCheck(AdminCode);-->
<!--        } else {-->
<!--            showCheck(createCode(""));-->
<!--        }-->
<!--    }-->

<!--    function showCheck(a) {-->
<!--        CodeVal = a;-->
<!--        var c = document.getElementById("myCanvas");-->
<!--        var ctx = c.getContext("2d");-->
<!--        ctx.clearRect(0, 0, 1000, 1000);-->
<!--        ctx.font = "80px 'Hiragino Sans GB'";-->
<!--        ctx.fillStyle = "#E8DFE8";-->
<!--        ctx.fillText(a, 0, 100);-->
<!--    }-->

<!--    $(document).keypress(function (e) {-->
<!--        // 回车键事件-->
<!--        if (e.which == 13) {-->
<!--            $('input[type="button"]').click();-->
<!--        }-->
<!--    });-->
<!--    //粒子背景特效-->
<!--    //			$('body').particleground({-->
<!--    //				dotColor: '#E8DFE8',-->
<!--    //				lineColor: '#133b88'-->
<!--    //			});-->
<!--    //			$('input[name="pwd"]').focus(function() {-->
<!--    //				$(this).attr('type', 'password');-->
<!--    //			});-->
<!--    //			$('input[type="text"]').focus(function() {-->
<!--    //				$(this).prev().animate({-->
<!--    //					'opacity': '1'-->
<!--    //				}, 200);-->
<!--    //			});-->
<!--    //			$('input[type="text"],input[type="password"]').blur(function() {-->
<!--    //				$(this).prev().animate({-->
<!--    //					'opacity': '.5'-->
<!--    //				}, 200);-->
<!--    //			});-->
<!--    //			$('input[name="login"],input[name="pwd"]').keyup(function() {-->
<!--    //				var Len = $(this).val().length;-->
<!--    //				if(!$(this).val() == '' && Len >= 5) {-->
<!--    //					$(this).next().animate({-->
<!--    //						'opacity': '1',-->
<!--    //						'right': '30'-->
<!--    //					}, 200);-->
<!--    //				} else {-->
<!--    //					$(this).next().animate({-->
<!--    //						'opacity': '0',-->
<!--    //						'right': '20'-->
<!--    //					}, 200);-->
<!--    //				}-->
<!--    //			});-->
<!--    var open = 0;-->
<!--    layui.use('layer', function () {-->
<!--        //非空验证-->
<!--        $('input[type="button"]').click(function () {-->
<!--            var login = $('input[name="login"]').val();-->
<!--            var pwd = $('input[name="pwd"]').val();-->
<!--            var code = $('input[name="code"]').val();-->
<!--            if (login == '') {-->
<!--                ErroAlert('请输入您的账号');-->
<!--            } else if (pwd == '') {-->
<!--                ErroAlert('请输入密码');-->
<!--            } else if (code == '' || code.length != 4) {-->
<!--                ErroAlert('输入验证码');-->
<!--            } else {-->
<!--                //登陆-->
<!--                var JsonData = {-->
<!--                    login: login,-->
<!--                    pwd: pwd,-->
<!--                    code: code-->
<!--                };-->
<!--                //$.post("url",JsonData,function(data) {-->
<!--                console.log(111);-->
<!--                alert("登录成功");-->
<!--                //window.location.href = 'http://127.0.0.1:8020/jQueryLogin/index.html?__hbt=1567408106021';-->
<!--                //});-->
<!--            }-->
<!--        })-->
<!--    })-->
<!--    //全屏-->
<!--    var fullscreen = function () {-->
<!--        elem = document.body;-->
<!--        if (elem.webkitRequestFullScreen) {-->
<!--            elem.webkitRequestFullScreen();-->
<!--        } else if (elem.mozRequestFullScreen) {-->
<!--            elem.mozRequestFullScreen();-->
<!--        } else if (elem.requestFullScreen) {-->
<!--            elem.requestFullscreen();-->
<!--        } else {-->
<!--            //浏览器不支持全屏API或已被禁用-->
<!--        }-->
<!--    }-->
<!--</script>-->
<!--&lt;!&ndash;<script type="text/javascript" src="img/ThreeWebGL.js"></script>&ndash;&gt;-->
<!--<script type="text/javascript" src="{{ url_for('static', filename='user/img/ThreeWebGL.js') }}"></script>-->
<!--&lt;!&ndash;<script type="text/javascript" src="img/ThreeExtras.js"></script>&ndash;&gt;-->
<!--<script type="text/javascript" src="{{ url_for('static', filename='user/img/ThreeExtras.js') }}"></script>-->

<!--&lt;!&ndash;<script type="text/javascript" src="img/Detector.js"></script>&ndash;&gt;-->
<!--<script type="text/javascript" src="{{ url_for('static', filename='user/img/Detector.js') }}"></script>-->

<!--&lt;!&ndash;<script type="text/javascript" src="img/RequestAnimationFrame.js"></script>&ndash;&gt;-->
<!--<script type="text/javascript" src="{{ url_for('static', filename='user/img/RequestAnimationFrame.js') }}"></script>-->

<!--<script id="vs" type="x-shader/x-vertex">-->
<!--			varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }-->


<!--</script>-->
<!--<script id="fs" type="x-shader/x-fragment">-->
<!--			uniform sampler2D map; uniform vec3 fogColor; uniform float fogNear; uniform float fogFar; varying vec2 vUv; void main() { float depth = gl_FragCoord.z / gl_FragCoord.w; float fogFactor = smoothstep( fogNear, fogFar, depth ); gl_FragColor = texture2D( map, vUv ); gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 ); gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor ); }-->


<!--</script>-->
<!--<script type="text/javascript">-->
<!--    if (!Detector.webgl) Detector.addGetWebGLMessage();-->
<!--    var canvas = document.createElement('canvas');-->
<!--    canvas.width = 32;-->
<!--    canvas.height = window.innerHeight;-->
<!--    var context = canvas.getContext('2d');-->
<!--    var gradient = context.createLinearGradient(0, 0, 0, canvas.height);-->
<!--    gradient.addColorStop(0, "#1e4877");-->
<!--    gradient.addColorStop(0.5, "#4584b4");-->
<!--    context.fillStyle = gradient;-->
<!--    context.fillRect(0, 0, canvas.width, canvas.height);-->
<!--    document.body.style.background = 'url(' + canvas.toDataURL('image/png') + ')';-->
<!--    var container;-->
<!--    var camera, scene, renderer, sky, mesh, geometry, material, i, h, color, colors = [],-->
<!--        sprite, size, x, y, z;-->
<!--    var mouseX = 0,-->
<!--        mouseY = 0;-->
<!--    var start_time = new Date().getTime();-->
<!--    var windowHalfX = window.innerWidth / 2;-->
<!--    var windowHalfY = window.innerHeight / 2;-->
<!--    init();-->
<!--    animate();-->

<!--    function init() {-->
<!--        container = document.createElement('div');-->
<!--        document.body.appendChild(container);-->
<!--        camera = new THREE.Camera(30, window.innerWidth / window.innerHeight, 1, 3000);-->
<!--        camera.position.z = 6000;-->
<!--        scene = new THREE.Scene();-->
<!--        geometry = new THREE.Geometry();-->
<!--        var texture = THREE.ImageUtils.loadTexture('');-->
<!--        texture.magFilter = THREE.LinearMipMapLinearFilter;-->
<!--        texture.minFilter = THREE.LinearMipMapLinearFilter;-->
<!--        var fog = new THREE.Fog(0x4584b4, -100, 3000);-->
<!--        material = new THREE.MeshShaderMaterial({-->
<!--            uniforms: {-->
<!--                "map": {-->
<!--                    type: "t",-->
<!--                    value: 2,-->
<!--                    texture: texture-->
<!--                },-->
<!--                "fogColor": {-->
<!--                    type: "c",-->
<!--                    value: fog.color-->
<!--                },-->
<!--                "fogNear": {-->
<!--                    type: "f",-->
<!--                    value: fog.near-->
<!--                },-->
<!--                "fogFar": {-->
<!--                    type: "f",-->
<!--                    value: fog.far-->
<!--                },-->
<!--            },-->
<!--            vertexShader: document.getElementById('vs').textContent,-->
<!--            fragmentShader: document.getElementById('fs').textContent,-->
<!--            depthTest: false-->
<!--        });-->
<!--        var plane = new THREE.Mesh(new THREE.Plane(64, 64));-->
<!--        for (i = 0; i < 8000; i++) {-->
<!--            plane.position.x = Math.random() * 1000 - 500;-->
<!--            plane.position.y = -Math.random() * Math.random() * 200 - 15;-->
<!--            plane.position.z = i;-->
<!--            plane.rotation.z = Math.random() * Math.PI;-->
<!--            plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;-->
<!--            GeometryUtils.merge(geometry, plane)-->
<!--        }-->
<!--        mesh = new THREE.Mesh(geometry, material);-->
<!--        scene.addObject(mesh);-->
<!--        mesh = new THREE.Mesh(geometry, material);-->
<!--        mesh.position.z = -8000;-->
<!--        scene.addObject(mesh);-->
<!--        renderer = new THREE.WebGLRenderer({-->
<!--            antialias: false-->
<!--        });-->
<!--        renderer.setSize(window.innerWidth, window.innerHeight);-->
<!--        container.appendChild(renderer.domElement);-->
<!--        document.addEventListener('mousemove', onDocumentMouseMove, false);-->
<!--        window.addEventListener('resize', onWindowResize, false)-->
<!--    }-->

<!--    function onDocumentMouseMove(event) {-->
<!--        mouseX = (event.clientX - windowHalfX) * 0.25;-->
<!--        mouseY = (event.clientY - windowHalfY) * 0.15-->
<!--    }-->

<!--    function onWindowResize(event) {-->
<!--        camera.aspect = window.innerWidth / window.innerHeight;-->
<!--        camera.updateProjectionMatrix();-->
<!--        renderer.setSize(window.innerWidth, window.innerHeight)-->
<!--    }-->

<!--    function animate() {-->
<!--        requestAnimationFrame(animate);-->
<!--        render()-->
<!--    }-->

<!--    function render() {-->
<!--        position = ((new Date().getTime() - start_time) * 0.03) % 8000;-->
<!--        camera.position.x += (mouseX - camera.target.position.x) * 0.01;-->
<!--        camera.position.y += (-mouseY - camera.target.position.y) * 0.01;-->
<!--        camera.position.z = -position + 8000;-->
<!--        camera.target.position.x = camera.position.x;-->
<!--        camera.target.position.y = camera.position.y;-->
<!--        camera.target.position.z = camera.position.z - 1000;-->
<!--        renderer.render(scene, camera)-->
<!--    }-->
<!--</script>-->
</body>

</html>






























